import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:tv_friso_screen/data_model/store_data.dart';
import 'package:tv_friso_screen/painter/chart_bean.dart';
import 'package:tv_friso_screen/painter/view/chart_double_bar.dart';
import 'package:tv_friso_screen/utils/result_check_utils.dart';
import 'package:tv_friso_screen/widget/map.dart';

import '../model/response_with_object.dart';
import '../net/api_address.dart';
import '../net/data_helper.dart';
import '../net/http_manager.dart';

class StoreEnPage extends StatefulWidget {
  const StoreEnPage({super.key});

  @override
  State<StoreEnPage> createState() => _StoreEnPageState();
}

class _StoreEnPageState extends State<StoreEnPage> {
  late double scale;

  var selectPIndex = -1; //点击选中的省份城市 集合下标
  ScrollController autoScontroller = ScrollController();

  List<String> topIcons = [
    "assets/images/icon_one.png",
    "assets/images/icon_two.png",
    "assets/images/icon_three.png",
    "assets/images/icon_four.png",
    "assets/images/icon_five.png",
  ];

  StoreData? storeData;
  Timer? timerPeriodic;
  // 设置滚动的距离
  double offset = 0;

  int limitLeng = 0;

  void getStoreData() async {
    var params = {};
    var formData = DataHelper.getBaseMapParams(params);
    var response =
        await HttpManager().get(ApiAddress.getStoreData, query: formData);

    if (mounted) {
      if (response['data'] != null &&
          response['code'] == HttpManager.codeSuccess) {
        ResponseWithObject<StoreData> data =
            ResponseWithObject.fromJson(response as Map<String, dynamic>, (j) {
          if (j != null) {
            return StoreData.fromJson(j);
          } else {
            return j;
          }
        });
        if (data.code == HttpManager.codeSuccess) {
          //给首页赋值
          setState(() {
            storeData = data.data;
          });
        } else {
          ResultCheckUtils.checkResult(context, data.code, data.msg);
        }
      } else {
        ResultCheckUtils.checkResult(
            context, response['code'], response['msg']);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    scale = ScreenUtil().screenHeight > 414
        ? 0.4
        : (ScreenUtil().screenHeight > 411 ? 0.3 : 0.25);

    limitLeng = scale <= 0.3 ? 4 : 10;

    // print("scale------- $scale  ${ScreenUtil().pixelRatio}  ${ScreenUtil().screenWidth} ${ScreenUtil().screenHeight}");

    getStoreData();

    // 滚动监听事件
    autoScontroller.addListener(() {
      if (null != storeData &&
          storeData!.newShop.shopDetails.isNotEmpty &&
          storeData!.newShop.shopDetails.length > limitLeng) {
        if (autoScontroller.position.pixels <= 0) {
        } else if (autoScontroller.position.pixels >=
            autoScontroller.position.maxScrollExtent) {
          setState(() {
            offset = 0;
          });
        }
      }
    });
    timerPeriodic = Timer.periodic(const Duration(milliseconds: 100), (timer) {
      if (autoScontroller.hasClients) {
        if (null != storeData &&
            storeData!.newShop.shopDetails.isNotEmpty &&
            storeData!.newShop.shopDetails.length >= limitLeng) {
          offset++;
          autoScontroller.animateTo(offset,
              duration: const Duration(milliseconds: 100),
              curve: Curves.linear);
        }
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    timerPeriodic?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              "assets/images/icon_phone_main_en_back.png",
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: Container(
          margin: EdgeInsets.only(
            bottom: scale <= 0.3 ? 70.w : 90.w,
            top: scale <= 0.3 ? 100.w : 130.w,
            left: 70.w,
            right: 55.w,
          ),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Expanded(
                      flex: scale <= 0.3 ? 13 : 1,
                      child: Container(
                        alignment: Alignment.centerLeft,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            underline(10.w, 0.w, 15.w, 30.w),
                            buildLineArrow("Store Coverage", true,
                                value: storeData == null
                                    ? "Deadline: "
                                    : "Deadline: ${storeData!.lastTime}"),
                            underline(20.w, 0.w, 15.w, 30.w),
                            Container(
                              alignment: Alignment.center,
                              width: double.infinity,
                              child: Stack(
                                children: [
                                  Container(
                                    width: double.infinity,
                                    alignment: Alignment.centerRight,
                                    margin: EdgeInsets.only(
                                      top: 150.w,
                                    ),
                                    child: Text(
                                      selectPIndex == -1 || storeData == null
                                          ? ""
                                          : "${storeData!.salesRegion[selectPIndex].pname}: ${storeData!.salesRegion[selectPIndex].nums}",
                                      style: TextStyle(
                                        color: const Color(0xFF1ED2FF),
                                        fontSize: 16.sp,
                                        fontWeight: FontWeight.normal,
                                      ),
                                      textAlign: TextAlign.end,
                                    ),
                                  ),
                                  Container(
                                    width: double.infinity,
                                    alignment: Alignment.center,
                                    child: MapWidget(
                                      initScaleX: scale,
                                      initScaleY: scale,
                                      callBack: (String name) {
                                        if (null != storeData &&
                                            storeData!.salesRegion.isNotEmpty) {
                                          for (var i = 0;
                                              i < storeData!.salesRegion.length;
                                              i++) {
                                            if (storeData!.salesRegion[i].pname
                                                .contains(name)) {
                                              setState(() {
                                                selectPIndex = i;
                                              });
                                              break;
                                            }
                                          }
                                        }
                                      },
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: scale <= 0.3 ? 10 : 1,
                      child: Container(
                        alignment: Alignment.centerLeft,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            underline(10.w, 0.w, 15.w, 30.w),
                            buildLineArrow("New Stores", false),
                            underline(20.w, 0.w, 15.w, 30.w),
                            Container(
                              alignment: Alignment.center,
                              width: double.infinity,
                              padding: EdgeInsets.only(
                                  top: 10.w, bottom: 10.w, left: 20.w),
                              margin: EdgeInsets.only(bottom: 12.w),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(5.w),
                                ),
                                border: Border.all(
                                  color: const Color(0xFF829EEE),
                                  width: 1.w,
                                ),
                              ),
                              child: Row(
                                children: [
                                  Text(
                                    "New Active Store(MTD)",
                                    style: TextStyle(
                                      color: const Color(0XFF1ED2FF),
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  Expanded(
                                    child: RichText(
                                      textAlign: TextAlign.center,
                                      text: TextSpan(
                                        children: [
                                          TextSpan(
                                            text: storeData == null ||
                                                    storeData!.newShop == null
                                                ? "0 "
                                                : "${storeData!.newShop!.shopCount}    ",
                                            style: TextStyle(
                                              color: const Color(0xFFFFCA9A),
                                              fontSize: 26.sp,
                                              fontWeight: FontWeight.normal,
                                            ),
                                          ),
                                          TextSpan(
                                            text: "   Store Count",
                                            style: TextStyle(
                                              color: const Color(0xFF1ED2FF),
                                              fontSize: 18.sp,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              child: Container(
                                alignment: Alignment.centerLeft,
                                padding: EdgeInsets.only(
                                  top: 13.w,
                                  left: 20.w,
                                  bottom: 10.w,
                                ),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(10.w),
                                  ),
                                  border: Border.all(
                                    color: const Color(0xFF829EEE),
                                    width: 1.w,
                                  ),
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      "New Stores Details",
                                      style: TextStyle(
                                        color: const Color(0XFF1ED2FF),
                                        fontSize: 18.sp,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                    SizedBox(
                                      height: 15.w,
                                    ),
                                    Expanded(
                                      child: storeData == null ||
                                              storeData!.newShop == null ||
                                              storeData!
                                                  .newShop.shopDetails.isEmpty
                                          ? Container()
                                          : ListView.builder(
                                              shrinkWrap: true,
                                              itemCount: storeData!
                                                  .newShop.shopDetails.length,
                                              scrollDirection: Axis.vertical,
                                              controller: autoScontroller,
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index) {
                                                var data = storeData!
                                                    .newShop.shopDetails[index];
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 15.w,
                                                      right: 10.w),
                                                  child: Row(
                                                    children: [
                                                      Text(
                                                        data.regTimes,
                                                        style: TextStyle(
                                                          color: const Color(
                                                              0xFF1ED2FF),
                                                          fontSize: 18.sp,
                                                          fontWeight:
                                                              FontWeight.w500,
                                                        ),
                                                      ),
                                                      SizedBox(
                                                        width: 15.w,
                                                      ),
                                                      Expanded(
                                                        flex: 3,
                                                        child: Text(
                                                          data.shopName,
                                                          maxLines: 1,
                                                          overflow: TextOverflow
                                                              .ellipsis,
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 18.sp,
                                                            fontWeight:
                                                                FontWeight.w500,
                                                          ),
                                                        ),
                                                      ),
                                                      Expanded(
                                                        flex: 2,
                                                        child: Text(
                                                          data.address,
                                                          textAlign:
                                                              TextAlign.end,
                                                          maxLines: 1,
                                                          overflow: TextOverflow
                                                              .ellipsis,
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 18.sp,
                                                            fontWeight:
                                                                FontWeight.w500,
                                                          ),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                );
                                              },
                                            ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20.w,
              ),
              Expanded(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Column(
                        children: [
                          underline(10.w, 0.w, 10.w, 30.w),
                          buildLineArrow("Coverage condition", false),
                          underline(10.w, 0.w, 10.w, 30.w),
                          Row(
                            children: [
                              Text(
                                "Store Count",
                                style: TextStyle(
                                  color: const Color(0xFF8FE1FB),
                                  fontSize: 20.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              SizedBox(
                                width: 10.w,
                              ),
                              storeNums(),
                              SizedBox(
                                width: 15.w,
                              ),
                              Text(
                                "Store",
                                style: TextStyle(
                                  color: const Color(0xFF8FE1FB),
                                  fontSize: 20.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                          Expanded(
                            child: Container(
                              margin: EdgeInsets.only(top: 10.w, bottom: 2.w),
                              padding: EdgeInsets.all(10.w),
                              color: const Color(0x260085F7),
                              child: Column(
                                children: [
                                  Expanded(
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                children: [
                                                  Container(
                                                    width: 10.w,
                                                    height: 10.w,
                                                    decoration: BoxDecoration(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  25.w)),
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 5.w,
                                                  ),
                                                  Text(
                                                    "Active Customers(MTD)",
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      fontSize: 14.sp,
                                                      fontWeight:
                                                          FontWeight.normal,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              SizedBox(
                                                height: 15.w,
                                              ),
                                              Expanded(
                                                child: Container(
                                                  margin: EdgeInsets.only(
                                                      top: 10.w, bottom: 10.w),
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.all(
                                                      Radius.circular(5.w),
                                                    ),
                                                    border: Border.all(
                                                      color: const Color(
                                                          0xFF829EEE),
                                                      width: 1.w,
                                                    ),
                                                  ),
                                                  alignment: Alignment.center,
                                                  child: RichText(
                                                    textAlign: TextAlign.center,
                                                    text: TextSpan(
                                                      children: [
                                                        TextSpan(
                                                          text: storeData ==
                                                                      null ||
                                                                  storeData!
                                                                          .monthCover ==
                                                                      null
                                                              ? "0 "
                                                              : "${storeData!.monthCover.activeCustomer} ",
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFFFFCA9A),
                                                            fontSize: 26.sp,
                                                            fontWeight:
                                                                FontWeight
                                                                    .normal,
                                                          ),
                                                        ),
                                                        TextSpan(
                                                          text: " Store",
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 16.sp,
                                                            fontWeight:
                                                                FontWeight
                                                                    .normal,
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                        SizedBox(
                                          width: 10.w,
                                        ),
                                        Expanded(
                                          child: useRate(
                                              "Platform UR(MTD)",
                                              storeData == null ||
                                                      storeData!.monthCover ==
                                                          null
                                                  ? "0"
                                                  : storeData!
                                                      .monthCover.loginRate,
                                              Colors.greenAccent),
                                        ),
                                        SizedBox(
                                          width: 10.w,
                                        ),
                                        Expanded(
                                          child: useRate(
                                              "Platform UR(LTM)",
                                              storeData == null ||
                                                      storeData!.monthCover ==
                                                          null
                                                  ? "0"
                                                  : storeData!
                                                      .monthCover.preLoginRate,
                                              const Color(
                                                  0xFF8FE1FB)), //上月平台使用率
                                        ),
                                      ],
                                    ),
                                  ),
                                  SizedBox(
                                    height: 10.w,
                                  ),
                                  Expanded(
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Column(
                                            children: [
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                children: [
                                                  Container(
                                                    width: 10.w,
                                                    height: 10.w,
                                                    decoration: BoxDecoration(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  25.w)),
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 5.w,
                                                  ),
                                                  Text(
                                                    "Active Store(MTD)",
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      fontSize: 20.sp,
                                                      fontWeight:
                                                          FontWeight.normal,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                              SizedBox(
                                                height: 15.w,
                                              ),
                                              Expanded(
                                                child: Container(
                                                  margin: EdgeInsets.only(
                                                      top: 10.w, bottom: 10.w),
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.all(
                                                      Radius.circular(5.w),
                                                    ),
                                                    border: Border.all(
                                                      color: const Color(
                                                          0xFF829EEE),
                                                      width: 1.w,
                                                    ),
                                                  ),
                                                  alignment: Alignment.center,
                                                  child: RichText(
                                                    textAlign: TextAlign.center,
                                                    text: TextSpan(
                                                      children: [
                                                        TextSpan(
                                                          text: storeData ==
                                                                      null ||
                                                                  storeData!
                                                                          .monthCover ==
                                                                      null
                                                              ? "0 "
                                                              : "${storeData!.monthCover.activeCount} ",
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFFFFCA9A),
                                                            fontSize: 26.sp,
                                                            fontWeight:
                                                                FontWeight
                                                                    .normal,
                                                          ),
                                                        ),
                                                        TextSpan(
                                                          text: " Store",
                                                          style: TextStyle(
                                                            color: const Color(
                                                                0xFF1ED2FF),
                                                            fontSize: 16.sp,
                                                            fontWeight:
                                                                FontWeight
                                                                    .normal,
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                        SizedBox(
                                          width: 10.w,
                                        ),
                                        Expanded(
                                          child: useRate(
                                              "Platform AR(MTD)",
                                              storeData == null ||
                                                      storeData!.monthCover ==
                                                          null
                                                  ? "0"
                                                  : storeData!
                                                      .monthCover.activeRate,
                                              Colors.greenAccent),
                                        ),
                                        SizedBox(
                                          width: 10.w,
                                        ),
                                        Expanded(
                                          child: useRate(
                                              "Platform AR(LTM)",
                                              storeData == null ||
                                                      storeData!.monthCover ==
                                                          null
                                                  ? "0"
                                                  : storeData!
                                                      .monthCover.preActiveRate,
                                              const Color(0xFF8FE1FB)),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Column(
                        children: [
                          underline(10.w, 0.w, 10.w, 30.w),
                          buildLineArrow("Store Activity Trend", false),
                          underline(10.w, 0.w, 0.w, 30.w),
                          Expanded(
                            child: Container(
                              color: const Color(0x260085F7),
                              child: Stack(
                                children: [
                                  storeData == null ||
                                          storeData!.shopData.isEmpty
                                      ? Container()
                                      : buildChartDoubleBarCircle(context),
                                  //单位
                                  Container(
                                    padding: EdgeInsets.only(top: 8.w),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Container(
                                          width: 10.w,
                                          height: 10.w,
                                          color: const Color(0xFF00B67C),
                                        ),
                                        SizedBox(
                                          width: 5.w,
                                        ),
                                        Text(
                                          "MAC",
                                          style: TextStyle(
                                            color: const Color(0xFFFFFFFF),
                                            fontSize: 12.sp,
                                          ),
                                        ),
                                        SizedBox(
                                          width: 20.w,
                                        ),
                                        Container(
                                          width: 10.w,
                                          height: 10.w,
                                          color: const Color(0xFF029BE8),
                                        ),
                                        SizedBox(
                                          width: 5.w,
                                        ),
                                        Text(
                                          "CAC",
                                          style: TextStyle(
                                            color: const Color(0xFFFFFFFF),
                                            fontSize: 12.sp,
                                          ),
                                        ),
                                        SizedBox(
                                          width: 20.w,
                                        ),
                                        Container(
                                          width: 10.w,
                                          height: 10.w,
                                          color: const Color(0xFFEEA666),
                                        ),
                                        SizedBox(
                                          width: 5.w,
                                        ),
                                        Text(
                                          "AR (MTD)",
                                          style: TextStyle(
                                            color: const Color(0xFFFFFFFF),
                                            fontSize: 12.sp,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20.w,
              ),
              Expanded(
                child: Column(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Column(
                        children: [
                          underline(10.w, 0.w, 10.w, 30.w),
                          buildLineArrow("Average Selling Price", false),
                          underline(10.w, 0.w, 10.w, 30.w),
                          Container(
                            width: double.infinity,
                            height: 70.w,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(5.w),
                              ),
                              border: Border.all(
                                color: const Color(0xFF106CDE),
                                width: 1.w,
                              ),
                            ),
                            child: RichText(
                              text: TextSpan(
                                children: [
                                  TextSpan(
                                    text: "Average Store Productivity(MTD)   ",
                                    style: TextStyle(
                                      color: const Color(0xFF1ED2FF),
                                      fontSize: 20.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  TextSpan(
                                    text: storeData == null
                                        ? "   0   "
                                        : "   ${storeData!.shopAverage}   ",
                                    style: TextStyle(
                                      color: const Color(0xFFFFCA9A),
                                      fontSize: 26.sp,
                                      fontWeight: FontWeight.normal,
                                    ),
                                  ),
                                  TextSpan(
                                    text: "   RMB",
                                    style: TextStyle(
                                      color: const Color(0xFF1ED2FF),
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              margin: EdgeInsets.only(top: 15.w, bottom: 12.w),
                              padding: EdgeInsets.all(10.w),
                              color: const Color(0x260085F7),
                              child: Column(
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Container(
                                        width: 10.w,
                                        height: 10.w,
                                        decoration: BoxDecoration(
                                          color: const Color(0xFF1ED2FF),
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(25.w)),
                                        ),
                                      ),
                                      SizedBox(
                                        width: 5.w,
                                      ),
                                      Text(
                                        "ARPU",
                                        style: TextStyle(
                                          color: const Color(0xFF1ED2FF),
                                          fontSize: 20.sp,
                                          fontWeight: FontWeight.normal,
                                        ),
                                      ),
                                      Expanded(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          children: [
                                            Container(
                                              width: 10.w,
                                              height: 10.w,
                                              color: Colors.orange,
                                            ),
                                            SizedBox(
                                              width: 5.w,
                                            ),
                                            Text(
                                              "MTD",
                                              style: TextStyle(
                                                color: const Color(0xFFFFFFFF),
                                                fontSize: 12.sp,
                                              ),
                                            ),
                                            SizedBox(
                                              width: 20.w,
                                            ),
                                            Container(
                                              width: 10.w,
                                              height: 10.w,
                                              color: Colors.greenAccent,
                                            ),
                                            SizedBox(
                                              width: 5.w,
                                            ),
                                            Text(
                                              "LTM",
                                              style: TextStyle(
                                                color: const Color(0xFFFFFFFF),
                                                fontSize: 12.sp,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    height: 10.w,
                                  ),
                                  Expanded(
                                    child: storeData == null ||
                                            storeData!.shopUnit.isEmpty
                                        ? Container()
                                        : Column(
                                            children: [
                                              Expanded(
                                                child: averageRate(
                                                    storeData!.shopUnit[0]),
                                              ),
                                              Expanded(
                                                child: averageRate(
                                                    storeData!.shopUnit[1]),
                                              ),
                                              Expanded(
                                                child: averageRate(
                                                    storeData!.shopUnit[2]),
                                              ),
                                              Expanded(
                                                child: averageRate(
                                                    storeData!.shopUnit[3]),
                                              ),
                                              Expanded(
                                                child: averageRate(
                                                    storeData!.shopUnit[4]),
                                              ),
                                            ],
                                          ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Column(
                        children: [
                          underline(10.w, 0.w, 10.w, 30.w),
                          buildLineArrow("ARPU Ranking（Top 5）", false),
                          underline(10.w, 0.w, 0.w, 30.w),
                          Expanded(
                            child: Container(
                              width: double.infinity,
                              margin: EdgeInsets.only(top: 10.w),
                              padding: EdgeInsets.only(
                                  left: 20.w,
                                  top: 10.w,
                                  right: 20.w,
                                  bottom: 10.w),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(10.w),
                                ),
                                border: Border.all(
                                  color: const Color(0xFF829EEE),
                                  width: 1.w,
                                ),
                              ),
                              child: storeData == null ||
                                      storeData!.orderRinking.isEmpty
                                  ? Container()
                                  : Column(
                                      children: List.generate(
                                        storeData!.orderRinking.length,
                                        (index) => storeTop(
                                            storeData!.orderRinking[index],
                                            index),
                                      ),
                                    ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget underline(double top, double left, double bottom, double mWidth) {
    return Container(
      margin: EdgeInsets.only(
        top: top,
        left: left,
        bottom: bottom,
      ),
      color: const Color(0xFF0F5FAF),
      width: double.infinity,
      height: 1.5.w,
      child: Stack(
        children: [
          Container(
            color: const Color(0xff00B7FE),
            width: mWidth,
            height: 2.w,
          ),
        ],
      ),
    );
  }

  Widget buildLineArrow(String text, bool isShowRight, {String value = ""}) {
    return Row(
      children: [
        SizedBox(
          width: 11.w,
        ),
        Image.asset(
          "assets/images/icon_trangle.png",
          width: 14.w,
          height: 29.w,
        ),
        SizedBox(
          width: 10.w,
        ),
        Text(
          text,
          style: TextStyle(
            color: const Color(0xFFFFFFFF),
            fontSize: 24.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(
          width: 20.w,
        ),
        Expanded(
          child: Visibility(
            visible: isShowRight,
            child: Container(
              color: const Color(0x260085F7),
              padding: EdgeInsets.only(right: 10.w),
              height: 40.w,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    value, //"截止时间: 2024-03-13 10:28:30",
                    style: TextStyle(
                      color: const Color(0XFF8FE1FB),
                      fontSize: 18.sp,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget storeNums() {
    String data = storeData == null ? "" : storeData!.allShopCount;
    if (data.isNotEmpty) {
      String temp = "";
      for (var i = 0; i < 6 - data.length; i++) {
        temp = "${temp}0";
      }
      data = temp + data;
    }
    return Row(
      children: [
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(0, 1),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        SizedBox(
          width: 10.w,
        ),
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(1, 2),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        SizedBox(
          width: 10.w,
        ),
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(2, 3),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 10.w, right: 10.w),
          child: Text(
            "，",
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(3, 4),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        SizedBox(
          width: 10.w,
        ),
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(4, 5),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        SizedBox(
          width: 10.w,
        ),
        Container(
          width: 50.w,
          height: 70.w,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.w),
            ),
            border: Border.all(
              color: const Color(0xFF106CDE),
              width: 1.w,
            ),
          ),
          child: Text(
            data.isEmpty ? "0" : data.substring(5, 6),
            style: TextStyle(
              color: const Color(0xFF8FE1FB),
              fontSize: 30.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }

  //客户活跃趋势
  Widget buildChartDoubleBarCircle(context) {
    List<ChartBean> chartBeans = [];
    for (var i = 0; i < storeData!.shopData.length; i++) {
      chartBeans.add(ChartBean(
        x: storeData!.shopData[i].months,
        y: double.parse(storeData!.shopData[i].orderNum),
        y2: double.parse(storeData!.shopData[i].activeNum),
        rate: double.parse(storeData!.shopData[i].activeRate),
        // rate2: double.parse(saleData!.yTDProductSaleChart[i].line9),
        color: Colors.greenAccent,
        color2: const Color(0xFF029BE8),
      ));
    }

    var chartBar = ChartDoubleBar(
      chartBeans: chartBeans,
      /*[
        ChartBean(
            x: '2023-10',
            y: 30,
            y2: 50,
            rate: 40,
            color: const Color(0xFF00B67C)),
        ChartBean(
            x: '2023-11',
            y: 100,
            y2: 70,
            rate: 80,
            color: const Color(0xFF00B67C)),
        ChartBean(
            x: '2023-12',
            y: 70,
            y2: 20,
            rate: 50,
            color: const Color(0xFF00B67C)),
        ChartBean(
            x: '2024-01',
            y: 70,
            y2: 90,
            rate: 80,
            color: const Color(0xFF00B67C)),
        ChartBean(
            x: '2024-02',
            y: 30,
            y2: 100,
            rate: 60,
            color: const Color(0xFF00B67C)),
        ChartBean(
            x: '2024-03',
            y: 90,
            y2: 150,
            rate: 100,
            color: const Color(0xFF00B67C)),
        // ChartBean(
        //     x: '2024-04', y: 100, y2: 250, rate: 90, color: Colors.greenAccent),
      ],*/
      size: Size(MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height / 5 * 1.8),
      rectColor: const Color(0xFF00B67C),
      isShowX: true,
      fontColor: Colors.white,
      rectShadowColor: Colors.white.withOpacity(0.5),
      isReverse: false,
      isCanTouch: false,
      isShowTouchShadow: false,
      isShowTouchValue: false,
      rectRadiusTopLeft: 0.w,
      rectRadiusTopRight: 0.w,
      duration: const Duration(milliseconds: 1000),
      fontSize: 12.sp,
    );
    return chartBar;
  }

  //覆盖情况 使用率
  Widget useRate(String title, String value, Color color) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 10.w,
              height: 10.w,
              decoration: BoxDecoration(
                color: const Color(0xFF1ED2FF),
                borderRadius: BorderRadius.all(Radius.circular(25.w)),
              ),
            ),
            SizedBox(
              width: 5.w,
            ),
            Text(
              title,
              style: TextStyle(
                color: const Color(0xFF1ED2FF),
                fontSize: 20.sp,
                fontWeight: FontWeight.normal,
              ),
            ),
          ],
        ),
        SizedBox(
          height: 10.w,
        ),
        Expanded(
          child: CircularPercentIndicator(
            radius: scale <= 0.3 ? 40.w : 50.w,
            lineWidth: 5.w,
            percent: double.parse(value) / 100,
            backgroundWidth: 5.w,
            center: Text(
              "$value%",
              style: TextStyle(
                color: const Color(0xFFFFCA9A),
                fontSize: 20.sp,
                fontWeight: FontWeight.normal,
              ),
            ),
            animation: true,
            animationDuration: 1200,
            backgroundColor: const Color(0xFF34677E),
            progressColor: color,
            circularStrokeCap: CircularStrokeCap.round,
          ),
        ),
      ],
    );
  }

  //店单产划分
  Widget averageRate(ShopUnit data) {
    return Container(
      padding: EdgeInsets.only(left: 20.w, right: 20.w),
      alignment: Alignment.center,
      child: Row(
        children: [
          Expanded(
            child: Text(
              data.title,
              style: TextStyle(
                color: const Color(0xFF1ED2FF),
                fontSize: 20.sp,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                LinearPercentIndicator(
                  lineHeight: 10.w,
                  percent: double.parse(data.monthCount) / 100,
                  animation: true,
                  animationDuration: 1200,
                  backgroundColor: Colors.transparent,
                  progressColor: Colors.orange,
                  barRadius: Radius.circular(0.w),
                  trailing: Text(
                    "${data.monthCount}%",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13.sp,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
                /*SizedBox(
                  height: 5.w,
                ),*/
                LinearPercentIndicator(
                  lineHeight: 10.w,
                  percent: double.parse(data.preCount) / 100,
                  animation: true,
                  animationDuration: 1200,
                  backgroundColor: Colors.transparent,
                  progressColor: Colors.greenAccent,
                  barRadius: Radius.circular(0.w),
                  trailing: Text(
                    "${data.preCount}%",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13.sp,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  //门店单产排行
  Widget storeTop(OrderRinking data, int index) {
    return Container(
      margin: EdgeInsets.only(top: 8.w, right: 10.w),
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            topIcons[index],
            width: 18.w,
            height: 24.w,
          ),
          SizedBox(
            width: 15.w,
          ),
          Expanded(
            child: Text(
              "${data.shopName}${data.address}",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: const Color(0xFF1ED2FF),
                fontSize: 18.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            width: 15.w,
          ),
          Text(
            "${data.amounts}千元",
            textAlign: TextAlign.left,
            style: TextStyle(
              color: const Color(0xFF1ED2FF),
              fontSize: 18.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }
}
